<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style>
		.btn {
			width: 120px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 14px;
			background-color: #3cf;
			color: #fff;
		}
	</style>
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="common-tit">
				<h2>导师数据</h2>
				<span>数据统计 > 导师数据</span>
			</div>
			<div class="xdata-box">
				<h3>导师课消排行榜</h3>
				<div id="teaData"></div>
			</div>
		</div>
		<div class="btn">按钮</div>
	</div>
	<script src="../js/echarts.common.min.js"></script>
	<script src="../js/common.js"></script>
	<script>
		var myChart = echarts.init(document.getElementById('teaData'));
		option = {
		    tooltip: {
		        trigger: 'axis',
		    },
		    legend: {
		        data: ['2011年', '2012年']
		    },
		    grid: {
		        left: '10%',
		        right: '4%',
		        top: '1%',
		        containLabel: false
		    },
		    toolbox: {
		         show : true,
		     },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01]
		    },
		    yAxis: {
		        type : 'category',
		         axisLabel:{
		                 interval:0,
		                 rotate:45,
		                 margin:2,
		                 textStyle:{
		                    color:"#222"
		                 }},
		        data: ['导师名字1','导师名字2','导师名字3','导师名字4','导师名字5','导师人名6','导师名字7','导师名字8','导师名字9','导师名字10']
		    },
		    series: [
		        {
		            name: '今天',
		            type: 'bar',
		            data: [18203, 23489, 29034, 104970, 131744, 630230, 430230, 230230, 730230, 530230]
		        }
		        // ,
		        // {
		        //     name: '昨天',
		        //     type: 'bar',
		        //     data: [88203, 33489, 79034, 404970, 331744, 630230, 330230, 630230, 330230, 530230]
		        // },
		        // {
		        //     name: '过去7天',
		        //     type: 'bar',
		        //     data: [48203, 23489, 89034, 504970, 731744, 430230, 230230, 430230, 230230, 430230]
		        // }, 
		        // {
		        //     name: '过去30天',
		        //     type: 'bar',
		        //     data: [38203, 43489, 59034, 604970, 431744, 630230, 230230, 730230, 330230, 830230]
		        // }

		    ]
		};

		myChart.setOption(option);
	</script>
</body>
</html>